"use client";

import React from "react";
import "./index.css";
import NameText from "./components/NameText";
import NameBox from "./components/NameBox";
import { usePoster } from "./usePoster";

export const Poster = () => {
  const { nameRef, layout, maxHeight } = usePoster();

  return (
    <>
      {/* 顶部的线 - 从顶部向中间生长，然后向外收缩消失 */}
      <div className="h-0 w-[1px] bg-black absolute top-0 left-1/2 line-top-animation-full origin-top" />

      {/* 底部的线 - 从底部向中间生长，然后向外收缩消失 */}
      <div className="h-0 w-[1px] bg-black absolute bottom-0 left-1/2 line-bottom-animation-full origin-bottom" />

      {/* 中间的我的名字 - 竖排文字，居中显示，先淡入再淡出 */}
      {/* 使用包装div来更好地控制垂直居中，解决下方留空问题 */}
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[99999999] name-container-animation">
        <div
          ref={nameRef}
          className="h-[30vh] flex items-center justify-center overflow-hidden"
          style={{ width: `${maxHeight * 2}vh` }}
          suppressHydrationWarning
        >
          {/* 左边的盒子 */}
          <div className="h-full w-1/2 relative overflow-hidden">
            {/* 左边的盒子内部 */}
            <div className="h-full w-full flex flex-col items-end justify-center absolute right-[-100%] left-name-animation-duration">
              {layout.map((item, index) =>
                item.side === "left" ? (
                  <NameText
                    key={index}
                    text={item.text}
                    boxSize={item.height.toString()}
                    position="left"
                  />
                ) : (
                  <NameBox key={index} boxSize={item.height.toString()} />
                )
              )}
            </div>
          </div>
          {/* 右边的盒子 */}
          <div className="h-full w-1/2 relative overflow-hidden">
            {/* 右边的盒子内部 */}
            <div className="h-full w-full flex flex-col items-start justify-center absolute left-[-100%] right-name-animation-duration">
              {layout.map((item, index) =>
                item.side === "right" ? (
                  <NameText
                    key={index}
                    text={item.text}
                    boxSize={item.height.toString()}
                    position="right"
                  />
                ) : (
                  <NameBox key={index} boxSize={item.height.toString()} />
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
